<template>
  <div class="center_bottom">
    <div class="ptz_select">
      <span class="text">云台通道:</span>
      <el-select v-model="channelName" placeholder="请选择" style="margin-left: 5px" size="mini" @change="onChannelChange">
        <el-option
            v-for="item in channelOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="item" v-for="(item,index) in list" :key="index">
      <div class="slaveAddress">
        <div>信道:{{item.slaveAddress}}</div>
      </div>
      <div class="geometry">
<!--        <svg class="iconfont" aria-hidden="true" style="color: #008eff;margin-right: 5px;font-size: 20px;">-->
<!--          <use xlink:href="#icon-sudu"></use>-->
<!--        </svg>-->
        <i class="el-icon-place" style="color: #ff3333"></i>
        几何&nbsp;
        <el-select v-model="item.geometry" placeholder="请选择" size="mini" style="width: 90px" @change="changeGeometry(item)">
          <el-option
              v-for="(item,index) in geometryOptions"
              :key="index"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="speed">
        <svg class="iconfont" aria-hidden="true" style="color: #008eff;margin-right: 5px;font-size: 20px;">
          <use xlink:href="#icon-sudu"></use>
        </svg>
        速度&nbsp;
        <el-select v-model="item.speed" placeholder="请选择" size="mini" style="width: 90px">
          <el-option
              v-for="(item,index) in item.options"
              :key="index"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="btn">
        <el-button size="mini" type="success" icon="el-icon-check" circle @click="submitSpeed(item)"></el-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

const PAN_SPEED_TABLE = [
  0.5, 1.0, 2.0, 3.0, 7.0, 7.2, 7.4, 7.7, 8.0, 9.0, 9.5,
  10.0, 10.1, 10.2, 10.3, 10.4, 10.5, 10.6, 10.7, 10.8, 10.9,
  11.0, 11.1, 11.3, 11.5, 11.7, 11.9, 12.1, 12.3, 12.5, 12.7,
  12.9, 13.1, 13.3, 13.5, 13.7, 13.9, 14.0, 14.2, 14.4, 14.7,
  14.9, 15.2, 15.5, 15.7, 15.9, 16.0, 16.1, 16.3, 16.5, 16.7,
  16.9, 17.0, 17.1, 17.2, 17.3, 17.4, 17.5, 17.6, 17.7, 17.8,
  17.9, 18.0
];
const TILT_SPEED_TABLE = [
  0.5, 0.8, 1.2, 1.4, 1.6, 1.8, 2.0, 2.2, 2.4, 2.6, 2.8, 3.0,
  3.2, 3.4, 3.6, 3.8, 4.0, 4.2, 4.4, 4.6, 4.8, 5.0, 5.2, 5.4, 5.6,
  5.8, 6.0, 6.2, 6.4, 6.6, 6.8, 6.9, 7.0, 7.1, 7.2, 7.3, 7.4, 7.5,
  7.6, 7.7, 7.8, 7.9, 8.1, 8.2, 8.3, 8.4, 8.5, 8.6, 8.7, 8.8, 8.9,
  9.0, 9.1, 9.2, 9.3, 9.4, 9.5, 9.6, 9.7, 9.8, 9.9, 10.0
];

export default {
  data() {
    return {
      list:[
        // 动态生成，根据选择的通道显示对应的地址码
      ],
      speed:null,
      geometryOptions: [{label:'PAN',value:'PAN'},{label:'TILT',value:'TILT'}],
      channelOptions: [],
      channelName: '0000000000000002', // 默认选择新通道
    };
  },
  mounted() {
    this.initOptions();
    this.getData();
    this.initChannelOptions();
  },
  methods: {
    async getData(){
      // 根据选择的通道生成对应的地址码列表
      this.updateAddressList();
    },
    //解析数据
    analysis(){

    },
    initChannelOptions(){
      if(this.channelOptions.length == 0){
        // 预定义所有已知通道（无论设备是否通电）
        const predefinedChannels = [
          '0000000000000000', // 192.168.2.100
          '0000000000000001', // 192.168.32.100
          '0000000000000002'  // 192.168.30.100
        ];

        // 添加预定义通道
        predefinedChannels.forEach(channel => {
          this.channelOptions.push({
            label: channel,
            value: channel
          });
        });

        // 从API获取在线通道信息
        axios.get(`${process.env.VUE_APP_HOST}/test/channel/list`).then(res=>{
          const array = Object.values(res)
          array.forEach(item => {
            // 只添加不在预定义列表中的新通道
            if(item.startsWith('0') && !predefinedChannels.includes(item)){
              this.channelOptions.push({
                label: item,
                value: item
              })
            }
          })

          // 设置默认选择通道（优先选择在线的通道）
          if(array.includes('0000000000000002')){
            this.channelName = '0000000000000002';
          } else if(array.includes('0000000000000000')){
            this.channelName = '0000000000000000';
          } else if(array.includes('0000000000000001')){
            this.channelName = '0000000000000001';
          } else {
            // 如果没有在线通道，默认选择第一个通道
            this.channelName = '0000000000000000';
          }

          // 初始化地址码列表
          this.updateAddressList();
        }).catch(error => {
          console.log('获取通道列表失败，使用预定义通道:', error);
          // 如果API调用失败，使用默认通道
          this.channelName = '0000000000000000';
          this.updateAddressList();
        });
      }
    },
    initOptions(){
      this.options = [];

    },
    submitSpeed(item){
      if(item.speed && item.geometry){
        const param = {
          address:item.slaveAddress,
          direction:item.geometry,
          speed:item.speed,
          channelName:this.channelName
        }
        axios.post(`${process.env.VUE_APP_HOST}/ptz/sendSetupSpeedCmd`,param).then(res=>{
          this.$message.success("发送成功!")
        })
      }else{
        this.$message.error("请选择数据")
      }
    },
    changeGeometry(item){
      for (let i = 0; i < this.list.length; i++) {
        console.log(this.list[i].slaveAddress,item.slaveAddress)
        if(this.list[i].slaveAddress === item.slaveAddress){
          if(item.geometry === 'PAN'){
            this.list[i].options = []
            PAN_SPEED_TABLE.forEach(row=>{
              this.list[i].options.push({
                label:row,
                value:row,
              })
            })
            this.list[i].speed = null
          }else if(item.geometry === 'TILT'){
            this.list[i].options = []
            TILT_SPEED_TABLE.forEach(row=>{
              this.list[i].options.push({
                label:row,
                value:row,
              })
            })
            this.list[i].speed = null
          }
          break;
        }
      }
    },
    // 根据通道更新地址码列表
    updateAddressList() {
      this.list = [];

      // 根据不同通道配置对应的地址码
      if (this.channelName === '0000000000000000') {
        // 192.168.2.100 - 地址码30
        this.list.push({
          slaveAddress: 30,
          speed: null,
          geometry: null,
          options: []
        });
      } else if (this.channelName === '0000000000000001') {
        // 192.168.32.100 - 地址码20
        this.list.push({
          slaveAddress: 20,
          speed: null,
          geometry: null,
          options: []
        });
      } else if (this.channelName === '0000000000000002') {
        // 192.168.30.100 - 地址码20
        this.list.push({
          slaveAddress: 20,
          speed: null,
          geometry: null,
          options: []
        });
      }
    },
    // 通道切换事件
    onChannelChange(value) {
      this.channelName = value;
      // 重新获取该通道的设备信息
      this.getData();
    }
  }
};
</script>
<style lang="scss" scoped>
.center_bottom {
  width: 100%;
  height: 100%;
  overflow-y: auto;

  .ptz_select{
    display: flex;
    justify-content: center;
    .text{
      display: flex;
      align-items: center;
    }
  }

  .item {
    display: flex;
    width: 100%;
    height: 65px;
    //background-image: url("../../../../public/img/bg-title.png");
    background-image: url("/img/bg-speed.png");
    background-size: 100% 100%;
    margin: 10px 0 10px 0;

    .slaveAddress{
      display: flex;
      align-items: center;
      padding-top: 4px;
      font-size: 22px;
      font-family: MyCustomFont,sans-serif;
      padding-left: 15px;
      width: 80px;
    }

    .speed,.geometry{
      display: flex;
      align-items: center;
      padding-left: 15px;
      width: 155px;
    }

    .btn{
      display: flex;
      align-items: center;
      padding-left: 15px;
    }

  }
}
</style>
